{{ 'text-list.min.css' | asset_url | stylesheet_tag }}

{%- liquid
  if section.settings.heading_position == 'left'
    assign show_side_bar = false
    assign content_class = 'col-12'
    if section.settings.text_title != blank or section.settings.title_description != blank
      assign show_side_bar = true
      assign content_class = 'col-12 col-lg-8 offset-xl-1'
    endif
  else
    assign content_class = 'col-12'
  endif
-%}
{%- assign section_identifier = '#shopify-section-' | append: section.id -%}
{%- assign  padding_top = section.settings.padding_top | append:'px' -%}
{%- assign  padding_bottom = section.settings.padding_bottom | append:'px' -%}

{%- assign padding_mobile_top = section.settings.padding_top_mob | append: 'px' -%}
{%- assign padding_mobile_bottom = section.settings.padding_bottom_mob | append: 'px' -%}

{% style %}
 {{ section_identifier }} {
    padding-top: {{padding_top}};
    padding-bottom: {{padding_bottom}};
  }

 @media only screen and (max-width: 430px) {
    {{ section_identifier }} {
      padding-top: {{ padding_mobile_top }};
      padding-bottom: {{ padding_mobile_bottom }};
    }
  }
{% endstyle %}

<div class="container {{section.settings.custom-class}}">
  <div class="row justify-content-center">
    {%- if section.settings.heading_position == 'top_center' -%}
      {%- if section.settings.text_title != blank or section.settings.title_description != blank -%}
        <div class="mw-text-5 mb-3 mb-lg-6 mx-auto text-center">
          {%- if section.settings.text_title != blank -%}
            {% assign mark = 'h2' %}
            {% if section.settings.enable_adjust_h_tag %}
              {% assign mark = section.settings.adjust_h_tag_to %}
            {% endif %}
            <{{ mark }} class="title h2 mb-0">{{ section.settings.text_title }}</{{ mark }}>
          {%- endif -%}
          {%- if section.settings.title_description != blank -%}
            <div class="description mt-2 no-last-margin richtext-with-link">{{ section.settings.title_description }}</div>
          {%- endif -%}
        </div>
      {%- endif -%}
    {%- else -%}
      {%- if show_side_bar -%}
        <div class="col-12 col-lg-4 col-xl-3 mb-3 mb-lg-0">
          {%- if section.settings.text_title != blank -%}
            {% assign mark = 'h6' %}
            {% if section.settings.enable_adjust_h_tag %}
              {% assign mark = section.settings.adjust_h_tag_to %}
            {% endif %}
            <{{ mark }} class="title h2 mb-3">{{ section.settings.text_title }}</{{ mark }}>
          {%- endif -%}
          {%- if section.settings.title_description != blank -%}
            <div class="description lead no-last-margin richtext-with-link">{{ section.settings.title_description }}</div>
          {%- endif -%}
        </div>
      {%- endif -%}
    {%- endif -%}
    <div class="{{ content_class }}">
      <div class="accordion accordion-flush border-bottom" id="accordionExample">
        {% for block in section.blocks %}
          <div class="accordion-item" data-section-id="{{ section.id }}">
            <div class="accordion-header" id="flush-heading{{ forloop.index }}">
              <button class="accordion-button collapsed px-0 py-lg-4" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse-{{ section.id }}-{{ forloop.index }}" aria-expanded="false" aria-controls="flush-collapse{{ forloop.index }}">
                {{ block.settings.questions_title }}
              </button>
            </div>
            <div id="flush-collapse-{{ section.id }}-{{ forloop.index }}" class="accordion-collapse collapse" aria-labelledby="flush-heading{{ forloop.index }}" data-bs-parent="#accordionFlushExample">
              <div class="accordion-body px-0 text-muted pt-0 pb-0 pb-md-2">{{ block.settings.questions_richtext }}</div>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>


{% schema %}
  {
    "name": "Text list",
    "tag": "section",
    "class": "text-list",
    "settings": [
      {
        "type": "select",
        "id": "heading_position",
        "label": "Heading position",
        "options": [
          {
            "value": "top_center",
            "label": "Top center"
          },
          {
            "value": "left",
            "label": "Left"
          }
        ],
        "default": "top_center"
      },
      {
        "type": "text",
        "id": "text_title",
        "label": "Heading",
        "default": "FAQs"
      },
       {
          "type": "text",
          "id": "custom-class",
          "label": "custom class",
        },
      {
        "type": "checkbox",
        "id": "enable_adjust_h_tag",
        "label": "Enable adjust H tag",
        "default": false
      },
      {
        "type": "select",
        "id": "adjust_h_tag_to",
        "label": "Adjust the H tag to",
        "options": [
          {
            "value": "h1",
            "label": "H1"
          },
          {
            "value": "h2",
            "label": "H2"
          },
          {
            "value": "h3",
            "label": "H3"
          },
          {
            "value": "h4",
            "label": "H4"
          },
          {
            "value": "h5",
            "label": "H5"
          },
          {
            "value": "h6",
            "label": "H6"
          }
        ],
        "default":   "h3"
      },
      {
        "type": "richtext",
        "id": "title_description",
        "label": "Description",
        "default": "<p>For more questions visit our help center.</p>"
      },
     {
        "type": "header",
        "content": "Kikstart Spacing Settings"
     },
     {
        "type": "range",
        "id": "padding_top",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "Padding top",
        "default": 64
      },
      {
        "type": "range",
        "id": "padding_bottom",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "Padding Bottom",
        "default": 64
      },
      {
        "type": "range",
        "id": "padding_top_mob",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "For Mobile Padding top",
        "default": 48
      },
      {
        "type": "range",
        "id": "padding_bottom_mob",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "For Mobile Padding Bottom",
        "default": 48
      }
    ],
    "blocks": [
      {
        "type": "questions",
        "name": "Questions",
        "settings": [
          {
            "type": "text",
            "id": "questions_title",
            "label": "Heading",
            "default": "Frequently asked question"
          },
          {
            "type": "richtext",
            "id": "questions_richtext",
            "label": "Text",
            "default": "<p>Use this text to answer questions in as much detail as possible for your customers.</p>"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Text list",
        "blocks": [
          {
            "type": "questions",
            "settings": {
              "questions_title": "Frequently asked question",
              "questions_richtext": "<p>Use this text to answer questions in as much detail as possible for your customers.</p>"
            }
          },
          {
            "type": "questions",
            "settings": {
              "questions_title": "Frequently asked question",
              "questions_richtext": "<p>Use this text to answer questions in as much detail as possible for your customers.</p>"
            }
          },
          {
            "type": "questions",
            "settings": {
              "questions_title": "Frequently asked question",
              "questions_richtext": "<p>Use this text to answer questions in as much detail as possible for your customers.</p>"
            }
          }
        ]
      }
    ]
  }
{% endschema %}